<template>
    <div style="background-color: rgb(249, 249, 249);">
         <el-row :gutter="20">
            <el-col :span="6"  v-for="(o,index) in titleData" :key="index">
                <div class="firstDiv">
                    <img  class="avatar"  src="../../assets/images/systemIndex/u1461.png" style="margin-left:15px;margin-top:25px;margin-right:10px;width:50px;height:50px;float:left;"/>
                    <div style="margin-top:30px">
                        <span>{{o}}</span><br/>
                        <h1 style="margin-top:0px"><span v-if="index>0">￥</span>{{titleNum[index]}}</h1>
                    </div>
                </div>
            </el-col>
        </el-row>
        <div style="border:1px solid rgb(228, 228, 228);height:200px;background-color:white">
        <el-container>
            <el-header>
            <span class="left">待处理事务</span>
            </el-header>
            <el-main >
                <div style="float:left;margin-right:25px;width:250px;height:35px;border-bottom:1px solid rgba(242, 242, 242, 1)">待付款订单 ==> (<a href="" @click.prevent="dd2()">{{pendingList[0]}}</a>)</div>
                <div style="float:left;margin-right:25px;width:250px;height:35px;border-bottom:1px solid rgba(242, 242, 242, 1)">待发货订单 ==> (<a href="" @click.prevent="dd2()">{{pendingList[1]}}</a>)</div>
                <div style="float:left;width:250px;height:35px;border-bottom:1px solid rgba(242, 242, 242, 1)">已发货 ==> (<a href="">{{pendingList[2]}}</a>)</div>
                <div style="float:left;margin-top:25px;margin-right:25px;width:250px;height:35px;border-bottom:1px solid rgba(242, 242, 242, 1)">已完成 ==> (<a href=""  @click.prevent="dd2()">{{pendingList[3]}}</a>)</div>
            </el-main>
        </el-container>
        </div>
        <div  style="border:1px solid rgb(228, 228, 228);margin-top:25px;height:175px;background-color:white">
        <el-container>
            <el-header>
            <span class="left">运营快捷入口</span>
            </el-header>
            <el-main>
                <a  @click.prevent="dd()" href="">
                    <img src="../../assets/images/u192.png" style="width:50px;height:50px;margin-right:50px;"/>
                </a>
                <a @click.prevent="dd2()" href="">
                    <img src="../../assets/images/u192.png" style="width:50px;height:50px;margin-right:50px;"/>
                </a>
                <a @click.prevent="dd3()" href="">
                    <img src="../../assets/images/u192.png" style="width:50px;height:50px;margin-right:50px;"/>
                </a>
                <div>
                    <span style="margin-left:-50px;">添加商品</span>
                    <span style="margin-left:35px;">订单列表</span>
                    <span style="margin-left:35px;">用户管理</span>
                </div>
            </el-main>
        </el-container>
        </div>
        <div  style="border:1px solid rgb(228, 228, 228);margin-top:25px;height:250px;background-color:white">
         <el-row :gutter="20">
            <el-col :span="12">
                <div style="border:1px solid rgb(228, 228, 228);height:250px;">
                    <el-container>
                        <el-header>
                        <span class="left">商品总览</span>
                        </el-header>
                        <el-main>
                            <div align="center"  style="margin-top:50px;">
                            <table>
                                <tr>
                                    <td class="zlFont">{{goodsList[0]}}</td>
                                    <td class="zlFont">{{goodsList[1]}}</td>
                                    <td class="zlFont">{{goodsList[2]}}</td>
                                    <td class="zlFont">{{goodsList[3]}}</td>
                                </tr>
                                <tr>
                                    <td style="text-align:center;">已下架</td>
                                    <td style="text-align:center;">已上架</td>
                                    <td style="text-align:center;">库存紧张</td>
                                    <td style="text-align:center;">全部商品</td>
                                </tr>
                            </table></div>
                        </el-main>
                    </el-container>
                </div>
            </el-col>
            <el-col :span="12">
                <div style="border:1px solid rgb(228, 228, 228);height:250px;">
                    <el-container>
                        <el-header>
                        <span class="left">用户总览</span>
                        </el-header>
                        <el-main>
                            <div align="center" style="margin-top:50px;">
                            <table>
                                <tr>
                                    <td class="zlFont">{{userList[0]}}</td>
                                    <td class="zlFont">{{userList[1]}}</td>
                                    <td class="zlFont">{{userList[2]}}</td>
                                    <td class="zlFont">{{userList[3]}}</td>
                                </tr>
                                <tr>
                                    <td style="text-align:center;">今日新增</td>
                                    <td style="text-align:center;">昨日新增</td>
                                    <td style="text-align:center;">本月新增</td>
                                    <td style="text-align:center;">全部会员</td>
                                </tr>
                            </table>
                            </div>
                        </el-main>
                    </el-container>
                </div>
            </el-col>
        </el-row>
        </div>
        <div  style="border:1px solid rgb(228, 228, 228);margin-top:25px;height:400px;background-color:white">
            <el-container >
                <el-header>
                <span class="left">订单统计</span></el-header>
                <el-main>
                    <div>
                        <span style="float:right">近七天</span>
                        <div id="tj"  align="center" style="width: 100%;height: 400px;"></div>
                    </div>
                </el-main>
            </el-container>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            dateList: [],
            goodsList: [],
            userList: [],
            pendingList: [],
            orderList: [],
            swList: [],
            titleData: ['今日订单总数', '今日销售总额', '昨日销售总额', '近七日销售总额'],
            titleNum: [1, 2, 3, 4],
            imgList: ['../../assets/images/systemIndex/u1461.png', '../../assets/images/systemIndex/u1484.png', '../../assets/images/systemIndex/u1537.png', '../../assets/images/systemIndex/u1456.png']
        }
    },
    methods: {
        dd() {
            this.$router.push('/addCommodity')
        },
        dd2() {
            this.$router.push('/Order')
        },
        dd3() {
            this.$router.push('/addCommodity')
        },
        getDate() {
                const arr = []
                for (let i = 0; i < 7; i++) {
                const time = new Date(new Date().setDate((new Date().getDate() + i) - 7));
                const year = time.getFullYear();
                const month = `0${time.getMonth() + 1}`.slice(-2);
                const strDate = `0${time.getDate()}`.slice(-2);
                arr.push(`${year}-${month}-${strDate}`)
            }
            this.dateList = arr
            },
        async initIndex() {
            const { data: first } = await this.$http.get("orders/statis/first");
            this.titleNum = first.data;
            const { data: pending } = await this.$http.get("orders/statis/pending");
            this.pendingList = pending.data;
            const { data: userSta } = await this.$http.get("orders/statis/userSta");
            this.userList = userSta.data;
            const { data: skuSta } = await this.$http.get("orders/statis/skuSta");
            this.goodsList = skuSta.data;
            const { data: orderList } = await this.$http.post("orders/statis/orderList", this.dateList);
            this.orderList = orderList.data;
            var myChart = this.$echarts.init(document.getElementById("tj"))
             var option = {
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        data: ['订单数']
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: [{
                        type: 'category',
                        data: this.dateList,
                        boundaryGap: false,
                        axisLabel: {
                        rotate: 30, // 旋转角度
                        interval: 0
                        }
                    }],
                    yAxis: [{
                            type: 'value',
                            name: '近一周订单统计',
                            min: 0,
                            max: 1050,
                            interval: 150,
                            smooth: true
                        }
                        ],
                    series: [{
                         data: this.orderList,
                        type: 'line',
                        smooth: true,
                        areaStyle: {}
                        }]
            };
            myChart.setOption(option)
            }
    },
    mounted() {
        this.getDate()
        this.initIndex()
    }
}
</script>

<style scoped>
 .text {
    font-size: 14px;
  }
  .item {
    padding: 18px 0;
  }
  .box-card {
    width: 150px;
  }
  .el-header {
  background-color: rgba(228, 228, 228, 1);
  color: #333;
  text-align: center;
  line-height: 60px;
}
.left {
  float: left;
}
.firstDiv{
    border:1px solid black;
    background-color: white;
    width: 250px;
    height: 100px;
    font-family: '微软雅黑';
    font-weight: 400;
    font-style: normal;
    text-align: left;
}
.zlFont{
    font-family: '微软雅黑';
    font-style: normal;
    font-size: 200%;
    color: red;
    text-align: center;
}
.lastDiv{
    background-color: white;
    height: 150px;
}
.header_right {
  margin-left: 15px;
}
.el-row {
    margin-bottom: 20px;
    &:last-child{
      margin-bottom: 0;
    }
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
  td{
      width: 75px;
  }
  a{
    color: red;
  }
</style>
